<script src="fuzhu.js"></script>

<style>
.tem7{ font-size: 16px; }
.tem7 .shipin-tit{ padding:20px 0; overflow: hidden; border-bottom:1px dashed #f29c9f; font-size: 18px;}
.tem7 .shipin-tit li{ float: left;padding:0 25px; border-right: 1px solid #eee; }
.tem7 .shipin-tit li a{ text-decoration: none;color: #5e5e5e; }
.tem7 .shipin-tit li a:hover, .tem7 .shipin-tit .active{ color: #dc012b; }
.tem7 .shipin{ padding:20px 0 0 0; overflow: hidden; }
.tem7 .shipin li{ float: left;width:50%; height: 290px; text-align: center;  }
.tem7 .shipin li a{ display:inline-block; width:94%; height: 250px; background: #eee; overflow: hidden; position: relative;}
.tem7 .shipin li p{ font-size: 16px;color:#666; }
.tem7 .shipin li video{ width: 100%;height: 100%; object-fit:cover; }
.tem7 .shipin li a .play-btn{
  position: absolute; top:50%;left:50%;padding-top:8px;width: 50px;height: 50px; border:1px solid #fff; border-radius: 50%;
  margin-top: -25px; margin-left: -25px;color:#fff;
}
.tem7 .shipin li a .play-btn:hover{ color:#f29c9f; border-color: #f2f2f2;   }
.tem7 .shipin li a .play-btn i{ font-size: 30px; margin-left:6px; }
/*---------------------------------------------------*/
.tem7 .kejian-load{ padding:0; padding-top: 10px; }
.tem7 .kejian-load a{ 
    border-bottom:1px dashed #f29c9f;
    display: block;
    font-size: 15px;
    color:#595959;
    line-height: 45px;
    height: 45px;
    text-decoration: none;
    overflow: hidden;
}
.icon-box{ float: left; width: 20px;line-height: 45px; }

.tem7 .kejian-load a .icon-folder-close{ color: #ffd659;font-size: 20px; vertical-align: middle; }
.tem7 .kejian-load a .icon-download-alt{ font-size: 15px; vertical-align: middle; }
.tem7 .x-btn{ float: right; color: #999; }
.tem7 .x-btn span{ display: inline-block;min-width: 40px;text-align: center; }
.tem7 .sw-cj{ padding-left: 5px;}
.tem7 a:hover .sw-cj{ color:#dd0011; }
/*模态框1*/
.video-box{ position: fixed;top:0;left:0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);z-index: 9999;display: none; }
.video-box>div{padding: 10px;background: #fff;width:90%; max-width: 1000px; position:absolute;left: 50%;top:50%;transform: translate(-50%,-50%);border:1px solid #eee;}
.video-box>div>a{position:absolute;right:10px;top:10px;padding-left: 2px; width: 30px;height: 30px; border:1px solid #BFC0BE;line-height: 1;border-radius:50%; background: #BFC0BE;}
.video-box>div>a:hover{ background: #fff;}
.video-box>div video{ width:100%; }
.video-box>div>p{ text-align: center;margin:0; }
/*模态框2*/
.tem7 .modal-header{ padding:0 5px 0 20px; border:0; }
.tem7 .modal-header .close{ margin:5px; }
.tem7 .modal-body{ padding:0; }
.tem7 .modal-body>div{ padding:10px 20px; background: #FAFAFA; color: #999; font-size: 18px; }
.tem7 .modal-body>div>input{ width: 20px;height: 20px;float: left;margin-top:3px;margin-right: 5px;}
.tem7 .modal-body ul{ padding:10px 20px;}
.tem7 .modal-body ul li{ padding:6px 0; }
.tem7 .modal-body ul li input{ width: 20px;height: 20px;float: left;margin-top:2px;margin-right: 5px; }
.tem7 .modal-body ul li .sw-right{ color: #999; }
.tem7 .modal-body ul li img{ margin-left: 10px; }
.tem7 .modal-footer{ text-align: center; }
.tem7 .modal-footer button{ font-size: 16px; padding-left: 30px; padding-right: 30px; }
/*课件组*/
.kejian_file .kj_btns{ padding:10px 0; overflow: hidden; }
.kejian_file .kj_btns li{ float: left; width: 16.667%; text-align: center;}
.kejian_file .kj_btns a{ display: inline-block; padding:2px 20px; background: #eee; border-radius:5px; text-decoration: none;color: #666;}
.kejian_file .kj_btns a:hover, .kejian_file .kj_btns a.active { background: #ffddde; color: #c50413;}

/* phone */
/*.screen-phone .info_page .temBox{ padding:0; }*/
.screen-phone .tem7 .shipin-tit{ padding:0; margin:0; }
.screen-phone .tem7 .shipin-tit li{ font-size: 15px; padding:0; border:0;margin-right:10px; line-height:1; }
.screen-phone .tem7 .shipin-tit li a{  display: block;  padding:8px 0; border-bottom: 2px solid #fff;}
.screen-phone .tem7 .shipin-tit li a:hover,.screen-phone .tem7 .shipin-tit .active{ border-color: #dc012b; }
.screen-phone .tem7 .shipin{ margin:0; }
.screen-phone .tem7 .shipin li{ width: 100%;height: 4.7rem;margin-bottom: 10px; }
.screen-phone .tem7 .shipin li a{ height: 4rem; width: 100%; }
.screen-phone .tem7 .shipin li p{ font-size: 14px; text-align: left; }
.screen-phone .kejian_file .kj_btns{ margin:0; padding-bottom: 0;}
.screen-phone .kejian_file .kj_btns a{ padding:5px; font-size: 12px; border-radius: 2px; line-height: 1; }
/*.screen-phone .tem7 .shipin li a .play-btn{ display: none; }*/
.screen-phone .tem7 .kejian-load a{ height: 32px; line-height: 32px; }
.screen-phone .icon-box{ line-height: 32px; }

</style>  

<div id="template" name="tem7">
  <div class="tem7">
    <!-- 视屏播放模态框1 -->
    <div class="video-box">
      <div>
        <div id="video_mo"></div>
        <a href="javascript:;" onclick="$(this).parent().parent().fadeOut()">
          <i class="icon icon-remove-sign" style="font-size: 28px;color:#7B0000;"></i>
        </a>
        <p>校园视频</p>
      </div>
    </div>
    <!-- 课件下载模态框2 -->
    <div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
            <h4 style="font-size: 16px;">下载任务列表</h4>
          </div>
          <div class="modal-body">
            <div><input type="checkbox" id="inp_all">文件名<i></i><span class="sw-right">大小</span></div>
            <ul id="file_load_list">
              <li><input type="checkbox">文件名<img src="imgs/r.jpg"><span class="sw-right">大小</span></li>
              <li><input type="checkbox">文件名<span class="sw-right">大小</span></li>
              <li><input type="checkbox">文件名<span class="sw-right">大小</span></li>
            </ul>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success">开始下载</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 导航 -->
    <ul class="shipin-tit">
      <li><a href="javascript:;" class="active" data-btype="1">视屏推荐</a></li>
      <li><a href="javascript:;" data-btype="2">课件下载</a></li>
      <li><a href="javascript:;" data-btype="3">作业课题</a></li>
      <li><a href="javascript:;" data-btype="4">慕课</a></li>
      <li><a href="javascript:;" data-btype="5">微课</a></li>
    </ul>
    <!-- 视屏播放列表 -->
    <ul class="shipin" id="shipin">
      <!-- <li>
        <a href="javascript:;" >
          <video>
            <source src="http://1251062843.vod2.myqcloud.com/3f080707vodtransgzp1251062843/78b32ad79031868223233700117/v.f20.mp4" type="video/mp4"/>
          </video>
          <span class="play-btn"><i class="icon icon-play"></i></span>
        </a>
        <p>校园风采</p>
      </li> -->
    </ul>
    <!-- 课件资料 -->
    <div class="kejian_file" id="kejian_file" style="display: none;">
      <ul class="kj_btns">
        <li><a href="javascript:;" class="active" data-ke="yu">语文组</a></li>
        <li><a href="javascript:;" data-ke="shu">数学组</a></li>
        <li><a href="javascript:;" data-ke="ji">计算机</a></li>
        <li><a href="javascript:;" data-ke="dian">机电组</a></li>
        <li><a href="javascript:;" data-ke="guan">经管组</a></li>
        <li><a href="javascript:;" data-ke="wai">外贸组</a></li>
      </ul>
      <ul class="kejian-load" id="kejian_load">
        <!-- <li>
          <a href="javascript:;" class="btn-list">
            <i class="icon icon-folder-close"></i>
            <span class="sw-cj">第三届作文比赛，征文结果公布第三届作文比赛，征文结果公布第三届作文比赛，征文结果公布</span>
            <div class="x-btn"><span>-</span><i class="icon icon-download-alt"></i></div>
          </a>
        </li> -->
      </ul>      
    </div>
  </div>
    <div style="text-align: center;">
      <ul id="myPager" class="pager"></ul>
    </div>
</div>


<script id="script" type="text/text">
    //视频点击播放
    $(".tem7").on("click",".play-btn",function(){  
      var src = $(this).prev().find("source").attr("src");
      var video = 
      '<video controls="controls" preload="preload" autoplay="autoplay">'+
        '<source src="'+src+'" type="video/mp4"/>'+
      '</video>'
      $(".video-box").fadeIn().find("#video_mo").html(video);
    })

    // 封装请求
    function getData(url,data){
      var result;
      $.ajax({
        url:url,
        data:data,
        type:"post",
        success:function(res){
          result = $.parseJSON(res);
        }
      })
      return result;
    }
    //视屏列表项模板
    function videoStr(arr){
      var str="";
      $.each(arr,function(i,v){
         str += '<li>'+
                  '<a href="javascript:;" >'+
                    '<video>'+
                      '<source src="'+v.url+'" type="video/mp4"/>'+
                    '</video>'+
                    '<span class="play-btn"><i class="icon icon-play"></i></span>'+
                  '</a>'+
                  '<p>'+v.title+'</p>'+
                '</li>'
      });
      return str;
    }
    //课件列表项模板
    function keStr(arr){
      var str="";
      $.each(arr,function(i,v){
         str += '<li data-id='+v.id+'>'+
          '<a href="javascript:;" class="btn-list">'+
            '<div class="icon-box"><i class="icon icon-folder-close"></i></div>'+
            '<div class="x-btn"><span class="load-info"></span><i class="icon icon-download-alt"></i></div>'+
            '<div class="sw-cj">'+v.title+'</div>'+
          '</a>'+
        '</li>'
      });
      return str;
    }

    /*初始化数据获取
      var data = getData("aa.php",{id:5,type:1});          视频获取需要判断是哪类视频
      var data = getData("aa.php",{id:5,type:1,ke:'yu'});  课件获取需要判断是哪类课件中的哪个组
    */
    // 虚拟数据
    var data1 = [
      {id:23,title:"校园风采",url:'http://1251062843.vod2.myqcloud.com/3f080707vodtransgzp1251062843/78b32ad79031868223233700117/v.f20.mp4'},
      {id:23,title:"校园风采",url:'http://1251062843.vod2.myqcloud.com/3f080707vodtransgzp1251062843/78b32ad79031868223233700117/v.f20.mp4'},
      {id:23,title:"校园风采",url:'http://1251062843.vod2.myqcloud.com/3f080707vodtransgzp1251062843/78b32ad79031868223233700117/v.f20.mp4'},
      {id:23,title:"校园风采",url:'http://1251062843.vod2.myqcloud.com/3f080707vodtransgzp1251062843/78b32ad79031868223233700117/v.f20.mp4'}
    ]    
    $("#shipin").show().html( videoStr(data1));
    if($("html").hasClass("screen-phone")){
      $("#shipin video").attr("controls","controls");
      $("#shipin .play-btn").hide();
    }
   
    //第一层导航按钮点击操作
    var navs_1 = $(".shipin-tit a");
    navs_1.click(function(){
      navs_1.removeClass("active");
      $(this).addClass("active");
      var btype = $(this).data("btype");
      if(btype == 1){
        $("#kejian_file").hide();
        $("#shipin").show().html( videoStr(data1));
      }else if(btype == 2){
        $("#shipin").hide();
        $("#kejian_file").show().find("#kejian_load").html(keStr(data1));
      }else if(btype == 3){
        $("#shipin").hide();
        $("#kejian_file").show().find("#kejian_load").html(keStr(data1));
      }else if(btype == 4){
        $("#kejian_file").hide();
        $("#shipin").show().html( videoStr(data1));
      }else if(btype == 5){
        $("#kejian_file").hide();
        $("#shipin").show().html( videoStr(data1));
      }
    })

    //第二层导航点击操作
    var navs_2 = $(".kj_btns a");
    navs_2.click(function(){
      navs_2.removeClass("active");
      $(this).addClass("active");
      var ke = $(this).data("ke");
      //请求获取数据然后渲染
      $("#kejian_file").find("#kejian_load").html(keStr(data1));
      // console.log(ke)
    })

    //点击下载图标
    $("#kejian_load").on("click","li",function(){
      var id = $(this).data("id");
      //请求获取数据 da = getData(url,data)
      //虚拟数据
      var da = [
        {title:'第十四届职业"文明风采"辩论赛视频',type:'r',size:'2966'},
        {title:'竞赛视频一',type:'r',size:'966'},
        {title:'竞赛视频二',type:'r',size:'1366'},
        {title:'海报',type:'g',size:'66'},
        {title:'参赛文档',type:'w',size:'32'},
        {title:'获奖文献',type:'p',size:'156'},
      ]

      var str = "";
      $.each(da,function(i,v){
        str += '<li><input type="checkbox">'+v.title+'<img src="imgs/'+v.type+'.jpg"><span class="sw-right">'+v.size+'KB</span></li>'
      })
      $('#file_load_list').html(str); 
      $('#myModal').modal({
          keyboard : false,
          show     : true
      })
      console.log(id)
    })
    
    //全选按钮
    $("#inp_all").change(function(){
      var bool = $(this).prop("checked");
      if(bool){
        $("#file_load_list input").prop("checked",true)
      }else{
        $("#file_load_list input").prop("checked",false)
      }
    })

      // 分页器
      $('#myPager').pager({
        page: 1,             //初始化显示第一页
        recTotal: 90,        //总条目
        recPerPage:15,       //每页显示的条目数
        elementCreator: function(element, $pager, state) {
          if (element === 'first_icon') {
              return $('<a class="pager-item" data-page="1" href="#page=1">首页</a>');
          }              
          if (element === 'last_icon') {
              return $('<a class="pager-item" data-page="'+state.totalPage+'" href="#page='+state.totalPage+'">尾页</a>');
          }

          if (element === 'prev_icon') {
              return $('<a class="pager-item" data-page="'+state.prev+'" href="#page='+state.prev+'">上一页</a>');
          }
          if (element === 'next_icon') {
              return $('<a class="pager-item" data-page="'+state.next+'" href="#page='+state.next+'">下一页</a>');
          }
          return false;
        },
        onPageChange:function(data){
          // console.log(data)
        },
      });
    </script>

